<template>
	<view class="searchContainer">
		<!-- <u-search placeholder="日照香炉生紫烟" shape="round" :clearabled="true" showAction actionText="取消"></u-search> -->
		<view class="input">
			<input type="text" v-model="seaValue" :placeholder="placeholder" />
			<image src="../../static/images/搜索.png" mode=""></image>
			<button size="mini" type="primary" @click="searchDetail">搜索</button>
		</view>

		<!-- 历史 热搜榜 -->
		<block>
			<view class="historyAndHot" v-if="historyList.length">
				<view class="history">
					<view class="top">
						<text style="color: #9a9a9a;">历史搜索</text>
						<i style="color: #9a9a9a;" @click="clearHistory">清空</i>
					</view>
					<view class="tags">
						<text v-for="(item, index) in historyList" :key="index" @click="searchDefault(item)">{{ item }}</text>
					</view>
				</view>
			</view>
			<view class="hot">
				<view class="remen" style="color: #9a9a9a;">热门搜索</view>
				<view class="tags">
					<text v-for="(tagsItem, index) in hotwords" :key="index"  @click.stop="searchDefault(tagsItem.word)">{{ tagsItem.word }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import requestT from '../../utils/requestTrue.js';
export default {
	data() {
		return {
			seaValue: '', //搜索值
			hotwords: [], //热搜词
			historyList: [], //历史记录
			placeholder: '' //默认搜索词
		};
	},
	mounted() {
		this.getHotSearch(), this.getHistory();
	},
	methods: {
		// 获得页面消息
		async getHotSearch() {
			let result = await requestT('/hotword');
			// console.log(result)
			this.hotwords = result.data;
			this.placeholder = result.data[0].searchWord;
		},
		// 点击搜索按钮
		searchDetail() {
			let searchItem = this.seaValue; //获取搜索框输入的值
			let historyList = this.historyList; //获取搜索记录历史
			// console.log(searchItem)
			// console.log(historyList)
			// 没有输入值 搜索默认提示词
			if (searchItem.trim() == '') {
				searchItem = this.placeholder;
			}

			historyList.push(searchItem); //添加历史记录
			uni.setStorageSync('historyList', historyList); //历史记录存到本地

			// 跳转到搜索详情页
			uni.navigateTo({
				url: '/pages/searchDetail/searchDetail?keyword=' + searchItem
			});
		},
		//获取本地搜索记录
		getHistory() {
			this.historyList = uni.getStorageSync('historyList') || [];
		},
		// clearHistory 清除 本地存储记录
		clearHistory() {
			this.historyList = [];
			uni.removeStorageSync('historyList');
		},
		//热搜和历史记录的点击搜索
		searchDefault(word) {
			// 跳转到搜索详情页
			uni.navigateTo({
				url: '/pages/searchDetail/searchDetail?keyword=' + word,
			});
		}
	}
};
</script>

<style lang="scss">
.searchContainer {
	width: 100%;
	height: 1185rpx;
	background-color: #ededed;
	border-radius: 10rpx;
	.input {
		background: white;
		width: 700rpx;
		margin-top: 20rpx;
		background: #ededed;
		height: 60rpx;
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: space-between;
		input {
			width: 380rpx;
			height: 60rpx;
			background: white;
			border-radius: 30rpx;
			position: absolute;
			left: 0;
			top: 16rpx;
			padding: 0 90rpx;
		}
		image {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			left: 50rpx;
			top: 32rpx;
		}
		button {
			background-color: #28b2f9;
			position: absolute;
			right: 10rpx;
			top: 16rpx;
		}
	}
	.historyAndHot {
		width: 100%;
		margin-top: 30rpx;
		padding: 30rpx 0;
		background: white;
		font-size: 26rpx;
		// position: relative;
		.top {
			margin: 0 20rpx;
			// width: 100%;
			display: flex;
			justify-content: space-between;
			i {
				display: block;
			}
		}
		.tags {
			width: 100%;
			height: 100%;
			padding: 30rpx 0;
			margin: 0 20rpx;
			text {
				display: inline-block;
				// background-color: #007AFF;
				border: 1rpx solid #e9e9e9;
				padding: 8rpx 20rpx;
				font-size: 30rpx;
				border-radius: 10rpx;
				margin: 10rpx 10rpx;
			}
		}
	}
	.hot {
		margin-top: 40rpx;
		width: 100%;
		background: white;
		padding: 30rpx;
		font-size: 26rpx;
		.tags {
			width: 100%;
			height: 100%;
			padding: 30rpx 0;
			margin-right: 10rpx;
			text {
				display: inline-block;
				// background-color: #007AFF;
				border: 1rpx solid #e9e9e9;
				padding: 8rpx 20rpx;
				font-size: 30rpx;
				border-radius: 10rpx;
				margin: 10rpx 10rpx;
			}
		}
	}
	.searchList {
		width: 100%;
		margin-top: 40rpx;
		.searchItem {
			background: white;
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 50rpx;
			font-size: 30rpx;
		}
	}
}
</style>
